<template>
    <section>
        <!-- 可增量全选 搜索的下拉组件 -->
        <el-select  style="width: 100%;" @change="changeSelect" @clear="clearSelect" :modelValue="keyword"
            clearable filterable :filter-method="filterMethod" :placeholder="placeholder" :disabled="disabled" multiple
            :collapse-tags="true" value-key="email">
            <el-option value="all">
                <span style="float: left;display: block;font-weight: bold; width: 100%;" @click="allSelectHandler"
                    :style="{ color: isAllSelect ? '#1865f2' : '' }">全选</span>
            </el-option>
            <el-option v-for="(item, index) in options" :key="index" :label="item[interFace.resLable] + item[interFace.resCode]"
                :value="item[interFace.resCode]">
                <span style="float: left">{{ item[interFace.resLable] }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px;" v-if="item[interFace.resCode] != 'all'">[{{
                    item[interFace.resCode]
                }}]</span>
            </el-option>
        </el-select>
    </section>
</template>
<script>
import api from '@/api'
export default {
    name: 'AllSelect',
    autoImport: true,
    props: {
        placeholder: String,
        backValue: Array, // 用于情况数据
        interFace: {
            type: Object,
            default: () => {
                // 默认为预算成本中心数据
                return {
                    fileName: 'publicApi',//接口文件夹名称
                    interfaceName: 'budgetCostCenter',// 接口函数名称,
                    resCode: 'centerCode',//编码,
                    resLable:'centerName',//显示名称
                }
            }
        }
        
    },
    data() {
        // 临时存储池
        this.pool = {}
        return {
            keyword: '',
            options: [],
            isAllSelect: false,
            oldOptions: []

        }
    },
    watch: {
        backValue: {
            immediate: true,
            async handler(newVal) {
                console.log(newVal,'newValnewValnewVal')
                if (newVal && newVal.length > 0) {
                    this.keyword = newVal
                } else {
                    this.keyword = []
                }

            }
        },
        keyword(newVal) {
            if (newVal.length > 0) {
                let index = newVal.findIndex(item => item == 'all')
                if (index > -1) newVal.splice(index, 1)
            }
        }

    },
    created() {
        this.getList()
    },
    methods: {
        filterMethod(e) {
            console.log('搜索', e)
            if (e == '') {
                this.isAllSelect = false
                return
            }
            this.isAllSelect = false
            let result = this.oldOptions.filter(item => {
                let rgex2 = new RegExp('^' + e, 'g')
                if (item.centerName.indexOf(e) > -1 || rgex2.test(item.centerCode)) return item
            })
            this.options = result
        },
        allSelectHandler() {
            this.isAllSelect = !this.isAllSelect
            if (!this.isAllSelect) this.keyword = []
        },
        clearSelect() {
            this.$emit('select', [])
        },
        changeSelect(value, e) {
            const  { resCode } = this.interFace
            let index = value.findIndex(item => item == 'all')

            if (this.isAllSelect && value.includes('all')) {
                let filterResult = this.options.map(item => item[resCode])
                this.keyword = [...new Set([...this.keyword, ...filterResult])]
            } else {
                if (index > -1) value.splice(index, 1)
                this.keyword = value
            }
            if (this.options.length > value.length && !value.includes('all')) {
                this.isAllSelect = false
            }

            let result = []

            this.keyword.forEach(el => {
                if (el != 'all') {
                    const res = this.oldOptions.filter(item => item[resCode] === el)
                    result.push(...res)
                }
            })
            console.log(result, 'resultresultresult', this.keyword)
            this.$emit('update:modelValue', this.keyword)
            this.$emit('select', result)
        },
        getList() {
            console.log(this,'this.props')
             const { fileName, interfaceName } = this.interFace
            api[fileName][interfaceName]().then(res => {
                this.options = res.list
                this.oldOptions = res.list
            })
        }
    }
}
</script>

<style scoped>
.item-sub {
    font-size: 12px;
    color: #999;
}
</style>
